<template>
    <div class="wrap normal">
        <!-- 搜索条件 -->
        <!-- <div class="wrap-form" id="wrap-form">
        </div> -->
        <!-- table数据 -->
        <div class="wrap-table">
            <el-table :data="tableData" :max-height="tableMaxHeight" border v-loading="tableLoading" :header-cell-style="{ background: '#F5F6FA' }">
                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column prop="nickName" label="用户昵称" min-width="100"> </el-table-column>
                <el-table-column prop="userMobile" label="用户手机号" min-width="100"> </el-table-column>
                <el-table-column prop="userRealName" label="真实姓名" min-width="100"> </el-table-column>
                <el-table-column prop="agentLevelName" label="用户身份" min-width="100"> </el-table-column>
                <el-table-column prop="name" label="地址薄姓名" min-width="100"> </el-table-column>
                <el-table-column prop="mobile" label="地址薄姓名" min-width="100"> </el-table-column>
                <el-table-column label="省市区街道" min-width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.province }}{{ scope.row.city }}{{ scope.row.district }}{{ scope.row.street }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="详细地址" min-width="200"> </el-table-column>
                <el-table-column prop="isDefault" label="默认地址" min-width="100"> 
                     <template slot-scope="scope">
                        <span>{{ scope.row.isDefault | filterDefaultAddressStatus }}</span>
                    </template>
                </el-table-column> 
                <el-table-column prop="createTime" label="创建时间" min-width="140">
                    <template slot-scope="scope">
                        {{ scope.row.createTime | iso8601DateTimeFormat }}
                    </template>
                </el-table-column>
            </el-table>
            <pagination :total="page.totalNum" :page.sync="page.pageNum" :limit.sync="page.pageSize" layout="total, sizes, prev, pager, next, jumper" @pagination="getTableData" />
        </div>
        <!-- 新增/编辑客户 -->
        <el-dialog v-if="operateDialog" :title="operateTitle" :visible.sync="operateDialog" @close="closeOperateDialog" :width="`${operateWidth}px`" :close-on-press-escape="false" :close-on-click-modal="false">
            <el-form ref="operateForm" :model="operateForm" :rules="operateRules" label-width="100px"> </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeOperateDialog">取 消</el-button>
                <el-button type="primary" :loading="operateLoading" @click="operateSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import tableHeight from '@/mixins/tableHeight'
import { getAddressList } from '@/api/address'

export default {
    name: 'AddressIndex',
    mixins: [tableHeight],
    data() {
        return {
            // 搜索条件
            form: {
            },
            // 分页
            page: {
                pageNum: 1,
                pageSize: 10,
                totalNum: 0
            },
            // 列表加载
            tableLoading: false,
            // 列表
            tableData: [],
            // 操作类型
            operateType: '',
            // 宽度
            operateWidth: 550,
            // 操作标题
            operateTitle: '',
            // 操作dialog
            operateDialog: false,
            // 操作确认按钮loading
            operateLoading: false,
            // 操作form
            operateForm: {

            },
            // 操作表单校验规则
            operateRules: {

            }
        };
    },
    methods: {
        // 数据
        getTableData() {
            this.tableLoading = true
            const data = {
                pageNum: this.page.pageNum,
                pageSize: this.page.pageSize,
                ...this.form
            }
            getAddressList(data).then(res => {
                this.tableLoading = false
                this.tableData = res.data.records
                this.page.totalNum = res.data.total
            }).catch(error => {
                this.tableLoading = false
            })
        },
        // 操作
        pageOperate(type, row) {
            this.operateType = type
            switch (type) {
                case 'search':
                    this.page.pageNum = 1
                    this.getTableData()
                    break;
                case 'refresh':
                    Object.assign(this.$data, this.$options.data())
                    this.getTableData()
                    break;
                default:
                    break;
            }
        },
    },
    mounted() {
        this.getTableData()
    },
};
</script>

<style lang="scss" scoped>
</style>